<template>
  <div class="wrap">
    <pro-table
      ref="proTableInst"
      tableTitle="入库列表"
      :columns="columns"
      :request="fetchInStorePage"
    >
      <template #operation>
        <n-space>
          <n-button type="primary" @click="handleAddInStore">新增入库</n-button>
        </n-space>
      </template>
    </pro-table>

    <pro-dialog
      v-model:showDialog="inStoreModalShow"
      :modalProps="modalProps"
      :width="1000"
      :showButton="true"
      :showConfirmButton="handleType === 'add'"
      :cancelButtonText="handleType === 'edit' ? '关闭' : '取消'"
      :contentStyle="{ 'padding-left': '10px', 'padding-right': '10px' }"
      :button-loading="confirmLoading"
      @handleConfirm="inStoreConfirm"
      @afterClosed="
        () => {
          resetInStoreForm()
          resetInStoreItemForm()
        }
      "
      v-bind="$attrs"
    >
      <n-card title="入库信息" size="small">
        <template #header>
          <div class="prefix-title">入库信息</div>
        </template>
        <pro-form
          ref="inStoreFormInst"
          v-model:form="inStoreForm"
          :formProps="{
            labelPlacement: 'left',
            labelWidth: '120px'
          }"
          :options="inStoreFormOptions"
        ></pro-form>
      </n-card>

      <n-card size="small" style="margin-top: 10px">
        <template #header>
          <div class="prefix-title">
            <n-space>
              入库资产
              <n-button
                v-if="handleType === 'edit'"
                type="primary"
                size="small"
                @click="handleAddType"
              >
                新增类型
              </n-button>
              <n-button
                v-if="handleType === 'edit'"
                type="primary"
                size="small"
                @click="handleDelType"
              >
                删除类型
              </n-button>
            </n-space>
          </div>
        </template>
        <pro-form
          ref="inStoreFormItemInst"
          v-model:form="inStoreItemForm"
          :formProps="{
            labelPlacement: 'left',
            labelWidth: '120px'
          }"
          :options="inStoreItemFormOptions"
        ></pro-form>
      </n-card>
    </pro-dialog>
  </div>
</template>

<script lang="ts" setup name="InStore">
  import { ProTableInst } from '@/components/pro-table/type'
  import { ProFormInst } from '@/components/pro-form/type'
  import { useInStoreApi, useInStoreProForm, useInStoreProTable } from './hooks'
  import { InStoreModel } from '@/api/model/asset-management/asset-in-store-model'
  import { getPurchaseDetailApi } from '@/api/workflow/purchase'

  const proTableInst = ref<ProTableInst | null>(null)
  const inStoreFormInst = ref<ProFormInst | null>(null)
  const inStoreFormItemInst = ref<ProFormInst | null>(null)

  const inStoreModalShow = ref(false)
  const handleType = ref<'add' | 'edit' | ''>('')
  const handleTag = computed(() =>
    handleType.value === 'add' ? '新增入库' : '入库详情'
  )

  const purchaseDetail = ref<any>({})
  const typeListLength = ref<number>(1)

  const modalProps = computed(() => {
    return {
      showIcon: false,
      title: handleTag.value
    }
  })

  handleType
  const { purchaseLoading, purchaseOptions, fetchGetPurchaseList } =
    useGetPurchaseList()

  const {
    inStoreForm,
    inStoreFormOptions,
    inStoreItemForm,
    inStoreItemFormOptions,
    resetInStoreForm,
    resetInStoreItemForm
  } = useInStoreProForm({
    typeListLength,
    fetchGetPurchaseDetail,
    purchaseLoading,
    purchaseOptions
  })

  const handleAddInStore = () => {
    handleType.value = 'add'
    inStoreModalShow.value = true
  }

  const handleEditInStore = async (row: InStoreModel) => {
    inStoreForm.value = row
    handleType.value = 'edit'
    await fetchGetAssetDetail(row.id)
    inStoreModalShow.value = true
  }

  const inStoreConfirm = async () => {
    const isPass =
      (await inStoreFormInst.value?.handleSubmit()) &&
      (await inStoreFormItemInst.value?.handleSubmit())
    if (isPass) {
      fetchAddOrEditInStore()
    }
  }

  const handleAddType = () => {
    typeListLength.value++
  }
  const handleDelType = () => {
    if (typeListLength.value > 1) {
      typeListLength.value--
    } else {
      useMsg('warning', '至少保留一个资产类型')
    }
  }

  async function fetchGetPurchaseDetail(id: string) {
    const res = await getPurchaseDetailApi({ id: parseInt(id) })
    if (res.code === '0000') {
      purchaseDetail.value = res.data
    }
  }

  const {
    fetchInStorePage,
    fetchAddOrEditInStore,
    fetchGetAssetDetail,
    fetchDelInStore,
    confirmLoading
  } = useInStoreApi({
    handleType,
    handleTag,
    inStoreModalShow,
    inStoreForm,
    proTableInst,
    typeListLength,
    inStoreItemForm,
    purchaseLoading,
    purchaseOptions,
    purchaseDetail
  })
  const { columns } = useInStoreProTable({
    handleEditInStore,
    fetchDelInStore
  })

  watch([purchaseDetail, typeListLength], () => {
    console.log('val', purchaseDetail)

    for (let i = 0; i < typeListLength.value; i++) {
      inStoreItemForm.value['typeId' + i] =
        purchaseDetail.value.purchaseTypeId.toString()
    }
  })

  watch(inStoreModalShow, (val) => {
    if (val) fetchGetPurchaseList(handleType.value === 'add')
  })
</script>

<style lang="less" scoped></style>
